/**
 * 点击详情按钮，展开右侧面板
 */
import React, { Component } from 'react';
import { Timeline } from '@teamix/ui';
import TextAvatar from '@txdfe/at-text-avatar';
import CommentInfo from './commentInfo';
import MdEditor from 'components/mdEditor';
import intl from '../../../locale';
import { filterXSS } from 'xss';
import MarkdownIt from 'markdown-it';
import hljs from 'utils/hl.js';

import './index.scss';

const md = new MarkdownIt({
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {
        return '';
      }
    }
    return ''; // 使用额外的默认转义
  },
});

export default class ConversationTimeLine extends Component {
  static propTypes = {};

  static defaultProps = {};

  state = {
    // 是否显示回复编辑器
    isEditorShow: false,
    // 回复的评论对象
    replyComment: null,
  };

  // 显示回复编辑
  showEditor = (comment) => {
    this.setState({
      isEditorShow: true,
      // 回复的comment,@人名，以及parent_id
      replyComment: comment,
    });
  };

  hideEditor = () => {
    this.setState({
      replyComment: null,
      isEditorShow: false,
    });
  };

  onSubmit = (value) => {
    const { replyComment } = this.state;
    const { curCommitInfo } = this.props;
    this.props.postInfo(
      {
        note: value,
        parent_id: replyComment ? replyComment.parent_id || replyComment.id : '',
        sha: curCommitInfo.id,
      },

      () => {
        this.setState({
          isEditorShow: false,
        });
      },
    );
  };

  render() {
    const { replyComment } = this.state;
    const { data } = this.props;
    return (
      <React.Fragment>
        <div className="commit-comment-info-list-item-copy">
          <Timeline>
            {data.map((item) => {
              return (
                <Timeline.Item
                  title={<CommentInfo comment={item} />}
                  content={
                    <div
                      className="comment-note"
                      // eslint-disable-next-line react/no-danger
                      dangerouslySetInnerHTML={{
                        __html: filterXSS(md.render(item?.note || ''), {
                          onIgnoreTagAttr: (_, name, value) => {
                            return `${name}=${value}`;
                          },
                        }),
                      }}
                    />
                  }
                  time={
                    <span
                      onClick={(e) => {
                        e.stopPropagation();
                        this.showEditor(item);
                      }}
                      className="reply-btn"
                    >
                      {intl.get({
                        id: 'code-assets.commitDetail.detail.commentInfo.Response',
                        defaultMessage: '回复',
                      })}
                    </span>
                  }
                  dot={
                    <TextAvatar
                      text={(item.author && item.author.name) || ''}
                      image={(item.author && item.author.avatar_url) || ''}
                      radius="50%"
                      size="xxs"
                    />
                  }
                />
              );
            })}
          </Timeline>
        </div>
        {this.state.isEditorShow ? (
          <MdEditor
            // onSubmit={this.onSubmit}
            onSubmitImmediate={this.onSubmit}
            onCancel={this.hideEditor}
            placeholder={intl.get({
              id: 'code-assets.commitDetail.detail.conversation.EnterAComment',
              defaultMessage: '请输入评论',
            })}
            submitBtnText={intl.get({
              id: 'code-assets.commitDetail.detail.conversation.SaveAsDraft',
              defaultMessage: '保存为草稿',
            })}
            useInLog
            initValue={replyComment && replyComment.author ? `@${replyComment.author.name} ` : ''}
          />
        ) : null}
      </React.Fragment>
    );
  }
}
